<style lang="scss" scoped>
.bg {
    background-image: url('/static/images/home/bg2.jpg');
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}

.language {
    position: absolute;
    top: 20px;
    left: 20%;
    height: 20px;
    color: #fff;
    font-size: 16px;
    a {
        color: #fff;
        padding: 0 15px;
    }
}

.logo {
    width: 257px;
    padding-top: 50px;
    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.login {
    width: 350px;
    height: 265px;
    margin-top: 30px;
    background: #fff;
    border-radius: 5px;
    .login-inner {
        margin: 0 auto;
        width: 280px;
        padding-top: 20px;
        p {
            font-size: 18px;
            color: #333;
            text-align: center;
        }
        a.now {
            margin: 10px auto 0;
            width: 100%;
            display: block;
            color: #199ed8;
            text-align: center;
            text-decoration: underline;
        }
    }
}

.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}
</style>
<template>
    <div class="bg">
        <div class="logo container">
            <img src="/static/images/home/logo2.png" />
        </div>
        <div class="login container">
            <div class="login-inner">
                <p>用户登录</p>
                <Form ref="formLogin" :model="formLogin" :rules="ruleLogin">
                    <FormItem prop="email">
                        <Input type="text" id="useremail" v-model="formLogin.username" placeholder="请输入用户名" @on-enter="next">
                        <Icon type="android-mail" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" id="userpassword" name="password" v-model="formLogin.password" placeholder="请输入密码" @on-enter="login('formLogin')">
                        <Icon type="ios-locked" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <div style="margin-top:18px;">
                        <div>
                            <template>
                                <Checkbox v-model="rememberPassword" @on-change="rememberPw">记住密码</Checkbox>
                                <a href="" style="float:right;color:#199ed8;">忘记密码？</a>
                            </template>
                        </div>
                    </div>
                    <FormItem style="width:280px;margin-top:10px;">
                        <Button type="primary" @click="login('formLogin')" style="width:280px;margin-top:15px;" :loading="load">登录</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
//引入登录方法
import {
    login
} from 'api/index.js'
export default {
    name: "login",
    data() {
        // 验证邮箱是否为空
        let validateLoginEmail = (rule, value, callback) => {
            /**验证邮箱**/
            // if (!(/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value))) {
            //     return callback(new Error('邮箱不能为空或邮箱错误'));
            // } else {
            //     callback();
            // }

            if (value === '') {
                return callback(new Error('用户名不能为空'));
            } else {
                callback();
            }
        };
        // 验证密码是否为空
        let validateLoginPassword = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('密码不能为空'));
            } else {
                callback();
            }
        };
        return {
            rememberPassword: false,
            load: false,
            formLogin: {
                username: '', //用户名
                password: ''  //密码
            },
            ruleLogin: {
                email: [{
                    validator: validateLoginEmail,
                    trigger: 'blur'
                }],
                password: [{
                    validator: validateLoginPassword,
                    trigger: 'blur'
                }]
            }
        }
    },
    // 实例创建时
    created() {
        this.watchCheckbox();
    },
    methods: {
        next() {
            $("input[name=password]").focus();
        },
        watchCheckbox() {
            // if (getCookie('email')) {
            //     console.log(typeof (getCookie('rememberPassword')));
            //     if (getCookie('rememberPassword') == 'true') {
            //         this.rememberPassword = Boolean(getCookie('rememberPassword'));
            //         this.rememberPw(this.rememberPassword);
            //         if (this.rememberPassword == true) {
            //             this.formLogin = {
            //                 username: getCookie('email'),
            //                 password: getCookie('passWord')
            //             }
            //         }
            //     }
            // }

            if (getCookie("rememberPassword")) {
                this.formLogin = {
                    username: getCookie('username'),
                    password: getCookie('passWord')
                }
                this.rememberPassword = true;
                console.log(this.formLogin)
            } else {
                this.formLogin = {
                    username: "",
                    password: ""
                };
                this.rememberPassword = false;
            }
        },
        // 记住密码
        rememberPw(val) {
            console.log(val)
            this.rememberPassword = val ? val : false;
        },
        login(name) {
            this.$store.state.token = '';
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.load = true;
                    let obj = {
                        'username': this.formLogin.username,
                        'password': this.formLogin.password
                    }

                    login.userLogin(obj).then((data) => {
                        if (data.jwt && data.user) {
                            console.log(data.jwt)
                            if (this.rememberPassword == true) {
                                delCookie("username");
                                delCookie("passWord");
                                delCookie('rememberPassword');
                                setCookie('passWord', obj.password, '360');
                                setCookie('username', obj.username, '360');
                                setCookie('rememberPassword', true, '360');
                            } else {
                                if (getCookie("username") || getCookie("passWord")) {
                                    delCookie("username");
                                    delCookie("passWord");
                                    delCookie('rememberPassword');
                                }
                            }
                            setCookie('userid', data.user.userid, null);
                            setCookie('token', "Bearer" + data.jwt.access_token, null);
                            sessionStorage.setItem("token","Bearer" + data.jwt.access_token);
                            $ajax.defaults.headers.common['Authorization'] = "Bearer" + data.jwt.access_token;
                            this.$router.push("/main");
                        } else {
                            this.$Message.error(data)
                        }
                        this.load = false;
                    }).catch((error) => {
                        this.load = false;
                    })
                }
            })

        }
    }
}

</script>